<template>
  <a-card :bordered="false">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="幼儿园名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入幼儿园名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="幼儿园简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="introduction">
              <a-textarea v-model="model.introduction" :maxLength="255" placeholder="请输入简介" :autosize="{ minRows: 4 }" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.introduction?model.introduction.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="大屏图集" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="images">
              <j-image-upload :number="imgMaxNumber" isMultiple  v-model="model.images"></j-image-upload>
              <div v-if="!formDisabled">最多上传 <span style="color: #f5222d;">{{ imgMaxNumber }}</span> 张照片</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="大屏视频" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="video">
              <j-image-upload isMultiple :number="1" accept="video/*" v-model="model.video"></j-image-upload>
              <p v-if="!formDisabled">请上传 1 部小于<span style="margin:0 5px;color:#f00;font-size: 14px;">100M</span>的视频！</p>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="幼儿园面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="area">
              <a-input v-model.number="model.area" placeholder="请输入面积" suffix="m²" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="考勤时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkTime">
              <a-time-picker
                format="HH:mm"
                valueFormat="HH:mm"
                v-model="model.checkTime"
                placeholder="请选择考勤时间"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="体温过低值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tempLow">
              <a-input-number v-model="model.tempLow" :min="0" :precision="1" :max="45" placeholder="请输入体温过低值" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="体温过高值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tempHigh">
              <a-input-number v-model="model.tempHigh" :min="0" :precision="1" :max="45" placeholder="请输入体温过高值" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <div style="width:100%;text-align: center;">
      <div v-if="submitShow">
        <a-button :loading="confirmLoading" style="margin:15px;" @click="editBtn(1)">取消</a-button>
        <a-button type="primary" :loading="confirmLoading" @click="submitForm">提交</a-button>
      </div>
      <a-button v-else type="primary" @click="editBtn(0)"  v-has="'management:sk_config:edit'">编辑</a-button>
    </div>
  </a-card>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'SkClassList',
  data() {
    return {
      confirmLoading:false,
      submitShow:false,
      model: {},
      validatorRules: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      imgMaxNumber:9,
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      disabled: false,
      url: {
        info:"/management/skConfig/list",
        add: '/management/skConfig/add',
        edit: '/management/skConfig/edit',
        queryById: '/management/skConfig/queryById'
      }
    }
  },
  components: {},

  filters: {},

  computed: {
    formDisabled() {
      return this.disabled
    }
  },

  created() {
    this.init()
  },

  activated() {},

  mounted() {
    
  },

  methods: {
    editBtn(status){
      this.disabled = !this.disabled;
      this.submitShow = !this.submitShow;
      if (status) {
        this.init();
      }
    },
    init(){
      getAction(this.url.info).then((res)=>{
        if(res.success){
          this.submitShow = false;
          this.disabled = true;
          this.model = res.result;
        } else {
          this.message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.edit
          method = 'put'
          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.submitShow = false;
                this.init()
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
/deep/ .ant-input-number{
  position: relative;
}
/deep/ .ant-input-number::before{
  content: "℃";
  position: absolute;
  top: 0;
  right: 32px;
  height: 32px;
  line-height: 32px;
  color: #999;
  font-size: 14px;
}
</style>
